<template>
<div class="sd">
    <div class="top">
        <div class="left">
            <div class="sdt">京东秒杀</div>
            <div class="ji">
                <div class="time">18</div>
                <img src="https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png" alt="">
                <div class="hou">{{ hours < 10 ? '0' + hours : hours }}</div>
                <span>:</span>
                <div class="min">{{ minutes < 10 ? '0' + minutes : minutes }}</div>
                <span>:</span>
                <div class="sec">{{ seconds < 10 ? '0' + seconds : seconds }}</div>
            </div>
        </div>
        <div class="right">
            <span>爆款轮番秒</span>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-more"></use>
             </svg>
        </div>
    </div>
    <div class="bottom">
        <ul>
            <li
            v-for="item in hotList"
            :key="item.proid">
        <img :src="item.img1" alt="">
    <span class="sale">￥{{item.sales}}</span></li>
        </ul>
    </div>

</div>
</template>
<script setup lang="ts">
import { Dialog } from 'vant'
import { ref, onMounted, watch } from 'vue'
import type { MyHotItem } from '@/config/interface'
import {hotListApi} from '@/api/home'

const hotList = ref<MyHotItem[]>([])
const ms = ref<number>(23456)
const timer = setInterval(() => ms.value--, 1000)
const hours = ref<number>(0)
const minutes = ref<number>(0)
const seconds = ref<number>(0)

const watchHandler = () => {
  hours.value = Math.floor(ms.value / (60 * 60))
  minutes.value = Math.floor(ms.value % (60 * 60) / 60)
  seconds.value = ms.value % 60

  if (ms.value <= 0) {
    clearInterval(timer)
    Dialog.alert({ title: '秒杀', message: '秒杀已经开始, 开来吧', theme: 'round-button', })
  }
}

watch(ms, watchHandler)

onMounted(async () => {
  watchHandler()
  const res = await hotListApi({ limitNum: 10 })
  hotList.value = res.data
})

</script>

<style scoped lang="scss">
.sd{
    height: 135px;
    box-sizing: border-box;
    padding: 0px 15px;
    display: flex;
    flex-direction: column;
    background-clip: content-box;
    >.top{
        height: 34px;
        background: url() no-repeat;
        background-size: contain;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >.left{
            width: 181px;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            >.sdt{
                width: 56px;
                height: 27px;
                font-size: 14px;
                line-height: 27px;
                margin:  0px 5px 0px 10px;
            }
            >.ji{
                margin-right: 20px;
                display: flex;
                justify-content: space-between;
            align-items: center;
            .hou,.min,.sec{
                width: 15px;
                height: 18px;
               background-color: red;
               border-radius: 5px;
               font-size: 12px;
               color: #fff;
             line-height: 18px;


            }
            >.time{
                font-size: 12px;
                color: red;
            }

               >img{
                width: 20px;
                height: 17.5px;

               }
            }
        }
        >.right{
            
            height: 35px;
            
            display: flex;
            justify-content: space-between;
            align-items: center;
            >span{
                width: 60px;
                font-size: 12px;
               color: red;
                
            }
            .icon{
                color: red;
            }
        }
    }
    >.bottom{
        margin-top: 10px;
        height: 100px;
        overflow-x: auto;
        &::-webkit-scrollbar { width: 0 }
        >ul{
            display: flex;
            height: 100%;
            >li{
                height: 77px;
                width: 55px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                padding: 3px;
                background-clip: content-box;
                margin: 0 3px;
                >img{
                display: block;
                width: 50px;
                height: 50px;
            }
            >.sale{
                color: red;
                margin-top: 4px;
                font-size: 12px;
            }
            }
            
        }
    }


}
</style>